<template>
	<view class="popup-picker popup-box">
		<!-- 普通弹窗 -->
		<uni-popup ref="popup" background-color="#fff" type="bottom" @change="change" customClass="bgF">
			<view class="top">
				<view class="left" @click="close">
					取消
				</view>
				<view class="title">
					{{title||'选择日期'}}
				</view>
				<view class="right" @click="confirm">
					保存
				</view>
			</view>
			
			<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
				<picker-view class="picker-view" indicator-style="height: 50px;" :immediate-change="true" mask-style="background:rgba(0,0,0,0)" :value="dateValue" @change="bindChange">
					<view class="center-bg"></view>
					<picker-view-column>
						<view class="item" v-for="(item,i) in years" :key="i" :style="{color:i==dateValue[0] ? '#333333' : '#999999',fontSize:i==dateValue[0] ? '36rpx' : '32rpx'}">
							{{item=='至今' ? item : item+'年'}}
						</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,i) in months" :key="i" :style="{color:i==dateValue[1] ? '#333333' : '#999999',fontSize:i==dateValue[1] ? '36rpx' : '32rpx'}">
							{{item}}月
						</view>
					</picker-view-column>
					
					
					<picker-view-column v-if="dateType=='days'">
						<view class="item" v-for="(item,i) in days" :key="i" :style="{color:i==dateValue[2] ? '#333333' : '#999999'}">
							{{item+1}}日
						</view>
					</picker-view-column>
				</picker-view>
				
				<!-- <view class="button-b">
					<button @click="close">取消</button>
					<button @click="confirm">确定</button>
				</view> -->
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: "popup-picker",
		props:{
			startTime:{
				type:String||Number,
				default:''
			},
			endTime:{
				type:String||Number,
				default:''
			},
			dateValueStr:{
				type:String,
				default:''
			},
			dateType:{
				type:String,
				default:''
			},
			title:{
				type:String,
				default:''
			}
		},
		data() {
			const years = [];
			const months = [];
			const days = [];
			if(this.startTime&&this.endTime){
				for (let i=this.$dayjs(this.startTime).format('YYYY');i<=this.$dayjs(this.endTime).format('YYYY');i++) {
					years.push(i)
				}
				if(this.dateType=='experience'){
					years.push('至今')
				}
				
				for (let i=1;i<=this.$dayjs().daysInMonth();i++) {
					days.push(i)
				}
			}else{
				
				for (let i=this.$dayjs().format('YYYY')-100;i<=this.$dayjs().format('YYYY');i++) {
					years.push(i)
				}
				if(this.dateType=='experience'){
					years.push('至今')
				}
				
				for (let i=0;i<this.$dayjs().daysInMonth();i++) {
					days.push(i)
				} 
			}
			for (let i=1;i<=12;i++) {
				months.push(i)
			}
			
			return {
				years,
				months,
				days,
				dateValue:[],
				pickerValue:[],
				timeValue:''
			};
		},
		computed:{
		},
		
		mounted() {
			this.initDate()
		},
		methods:{
			initDate(){
				if(this.startTime&&this.endTime){
					this.dateValue[0] = this.$dayjs().format('YYYY') - this.$dayjs(this.startTime).format('YYYY')
					this.dateValue[1] = Number(this.$dayjs().format('M'))-1
				}else if(this.dateValueStr){
					if(this.dateValueStr=='至今'){
						this.dateValue[0] = this.years.length-1
					}else{
						this.years.forEach((e,i)=>{
							if(e==this.$dayjs(this.dateValueStr).format('YYYY')){
								this.dateValue[0] = i
								this.$set(this.dateValue,0,i)
							}
						})
						// this.dateValue[1] = this.$dayjs(this.dateValueStr).format('M')
						this.$set(this.dateValue,1,Number(this.$dayjs(this.dateValueStr).format('M')-1))
					}
				}else{
					this.dateValue[0] = 100
					this.dateValue[1] = Number(this.$dayjs().format('M'))-1
				}
				if(this.years[this.dateValue[0]]==this.$dayjs().format('YYYY')){
					let m = []
					for (let i=1;i<=this.$dayjs().format('M');i++) {
						m.push(i)
					}
					this.months = m
				}
				
				if(this.years[this.dateValue[0]]=='至今'){
					this.months = []
				}
				
				
				if(this.dateType=='days'){
					
					this.dateValue[2] = Number(this.$dayjs().format('D'))-1
				}
				
				this.$forceUpdate()
				if(this.dateType=='experience'){
					if(this.years[this.dateValue[0]]=='至今'){
						this.timeValue = `${this.years[this.dateValue[0]]}`
					}else{
						this.timeValue = `${this.years[this.dateValue[0]]}-${this.months[this.dateValue[1]]}`
					}
				}else if(this.dateType=='days'){
					this.timeValue = `${this.years[this.dateValue[0]]}-${this.months[this.dateValue[1]]}-${this.dateValue[2]+1}`
				}else{
					this.timeValue = `${this.years[this.dateValue[0]]}-${this.months[this.dateValue[1]]}`
				}
				
			},
			open(){
				this.$refs.popup.open()
			},
			close(){
				this.$refs.popup.close()
			},
			// popup change
			change(){
				// this.initDate()
			},
			
			// picker change
			bindChange(val){
				this.dateValue = val.detail.value
				if(this.years[this.dateValue[0]]==this.$dayjs().format('YYYY')){
					let m = []
					for (let i=1;i<=this.$dayjs().format('M');i++) {
						m.push(i)
					}
					this.months = m
					if(this.dateValue[1]>this.months.length-1){
						this.dateValue[1] = this.months.length-1
					}
				}else{
					if(this.years[this.dateValue[0]]=='至今'){
						this.months = []
					}else{
						let m = []
						for (let i=1;i<=12;i++) {
							m.push(i)
						}
						this.months = m
					}
				}
				if(this.years[this.dateValue[0]]=='至今'){
					this.days = []
				}else{
					this.days = this.$dayjs(`${this.years[this.dateValue[0]]}-${this.months[this.dateValue[1]]}`).daysInMonth()
				}
				
				if(this.dateType=='experience'){
					if(this.years[this.dateValue[0]]=='至今'){
						this.timeValue = `${this.years[this.dateValue[0]]}`
					}else{
						this.timeValue = `${this.years[this.dateValue[0]]}-${this.months[this.dateValue[1]]}`
					}
				}else if(this.dateType=='days'){
					this.timeValue = `${this.years[this.dateValue[0]]}-${this.months[this.dateValue[1]]}-${this.dateValue[2]+1}`
				}else{
					this.timeValue = `${this.years[this.dateValue[0]]}-${this.months[this.dateValue[1]]}`
				}
				
			},
			sexBindChange(val){
				this.pickerValue = val.detail.value
			},
			
			confirm(){
				this.close()
				this.$emit('change', this.timeValue)
			}
		}
	}
</script>
<style>
	
	.popup-picker /deep/ .bgF{
		border-radius: 40rpx 40rpx 0 0 !important;
	}
</style>
<style lang="scss" scoped>
	.top{
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		padding: 36rpx 28rpx 10rpx;
		box-sizing: border-box;
		.left{
			font-weight: bold;
			font-size: 30rpx;
			color: #333333;
			line-height: 42rpx;
		}
		.title{
			font-weight: bold;
			font-size: 36rpx;
			color: #333333;
			line-height: 50rpx;
		}
		.right{
			font-weight: bold;
			font-size: 30rpx;
			color: #E72A2A;
			line-height: 42rpx;
		}
	}
	
	.popup-content{
		padding: 0 22rpx;
		box-sizing: border-box;
	}
	
	.picker-view {
		width: 100%;
		height: 510rpx;
		margin-top: 20rpx;
		position: relative;
		.center-bg{
			width: 100%;
			height: 102rpx;
			background-color: #F4F4F4;
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			z-index: 0;
			border-radius: 16rpx;
		}
	}
	/deep/ .item {
		line-height: 102rpx;
		text-align: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 36rpx;
		color: #333333;
		font-style: normal;
		text-transform: none;
	}
	.button-b{
		display: flex;
		justify-content: space-between;
		button{
			width: 300rpx;
			height: 82rpx;
			border-radius: 41rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 30rpx;
			line-height: 82rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
			&:first-child{
				background-color: #F5F5F5;
				color: #777777;
			}
			&:last-child{
				background-color: #FD5100;
				color: #FFFFFF;
				margin-left: 24rpx;
			}
		}
	}
	
</style>
